<template>
	<div class="sug_container" v-show="list.length > 0">
		<div class="sug_title">你可以继续问我：</div>
		<div class="sug_list">
			<div class="sug_item" v-for="(item, index) in list" :key="index" @click="sugClick(item)">
				{{ item }}
			</div>
		</div>
	</div>
</template>
<script>
export default {
	props: {
		list: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {}
	},
	methods: {
		sugClick(item) {
			this.$emit('on-suggestion', item)
		}
	}
}
</script>
<style lang="less" scoped>
.sug_container {
	// margin-bottom: 1.2rem;
	padding: 0 1.5rem;
	.sug_title {
		font-family: PingFangSC-Regular;
		font-size: 1rem;
		color: #999999;
		letter-spacing: 0;
		font-weight: 400;
		margin: 1rem 0;
	}
	.sug_list {
		display: flex;
		flex-wrap: wrap;
		.sug_item {
			background: var(--chat-sug-bg);
			border-radius: 0.38rem;
			padding: 0.6rem 1rem;
			color: var(--chat-sug-color);
			font-family: PingFangSC-Regular;
			font-size: 1rem;
			font-weight: 400;
			margin-right: 1rem;
			margin-bottom: 1rem;
			cursor: pointer;
			opacity: var(--chat-answer-opacity);
		}
	}
}
</style>
